<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<app-header (emitSearch)="this.searchTerm({ term: $event })"></app-header>

<div class="container m-auto grid grid-cols-4 gap-0 m-7"
     *ngIf="imagenDocuments.length > 0 || geminiDocuments.length > 0 || showDefaultDocuments">
  <div class="col-span-4 bg-custom-gray p-4" style="padding: 1rem">
    <span class="text-3xl m-0">Image Generation</span>
    <p *ngIf="selectedResult?.enhancedPrompt && !showDefaultDocuments"
       class="text-sm text-gray-600 mt-1 truncate"
       matTooltip="{{selectedResult?.enhancedPrompt}}"
       matTooltipPosition="below"
       aria-label="Full prompt text">
      Prompt: {{ selectedResult?.enhancedPrompt }}
    </p>
    <p *ngIf="summary && (showDefaultDocuments || !selectedResult?.enhancedPrompt)" class="text-sm text-gray-600 mt-1">
      {{ summary }}
    </p>
  </div>

  <!-- Image display and interaction area -->
  <div class="col-span-3 bg-white p-4" style="display: flex; flex-direction: column; min-height: 80vh;">

    <!-- 1. Single Main Image Display Area -->
    <div class="flex-grow flex items-center justify-center mb-4 relative bg-gray-100 p-2 rounded-lg shadow min-h-[40vh] max-h-[50vh]">
      <img [src]="'data:image/png;base64,' + (selectedResult?.image?.encodedImage || '')"
           *ngIf="!showDefaultDocuments && selectedResult"
           class="max-h-full max-w-full object-contain rounded" alt="Selected Image" />
      <!-- Placeholder for when no results or no selection -->
      <img [src]="defaultPlaceholderImageUrl"
           *ngIf="showDefaultDocuments || (!selectedResult && (imagenDocuments.length > 0 || geminiDocuments.length > 0))"
           class="max-h-full max-w-full object-contain opacity-50 rounded" alt="Image Placeholder" />
      <!-- Message if no results at all -->
       <div *ngIf="!showDefaultDocuments && imagenDocuments.length === 0 && geminiDocuments.length === 0" class="text-center text-gray-500 p-4">
          No images were generated for this query.
       </div>

      <!-- Optional: Source of the main selected image -->
      <div *ngIf="selectedResult?.source && !showDefaultDocuments"
           class="absolute top-2 right-2 bg-neutral-800 bg-opacity-70 text-white text-xs px-2 py-1 rounded-md shadow">
        Source: {{ selectedResult?.source }}
      </div>
    </div>

    <!-- 2. Two-Column Thumbnail Area -->
    <div class="grid grid-cols-2 gap-x-4" style="max-height: 30vh;"> <!-- Adjust max-height as needed for thumbnail area -->

      <!-- Column 1: Imagen Thumbnails -->
      <div class="flex flex-col h-full">
        <h4 class="text-md font-semibold mb-2 text-center text-gray-700 sticky top-0 bg-white z-10 py-1">Imagen Model Results</h4>
        <div class="flex-grow overflow-y-auto p-1 bg-gray-50 rounded-lg custom-scrollbar">
          <div class="flex flex-wrap justify-center gap-2">
            <div class="w-24 h-24 cursor-pointer relative group border-2 hover:border-blue-500 rounded-md overflow-hidden shadow-sm"
                 [class.border-blue-600]="result === selectedResult"
                 [class.border-transparent]="result !== selectedResult"
                 *ngFor="let result of imagenDocuments"
                 (click)="changeImageSelection(result)">
              <img [src]="'data:image/png;base64,' + result.image?.encodedImage"
                   class="w-full h-full object-cover" alt="Imagen Thumbnail" />
            </div>
            <div *ngIf="imagenDocuments.length === 0 && !showDefaultDocuments" class="text-center text-gray-400 text-sm p-4">
              No Imagen results.
            </div>
          </div>
        </div>
      </div>

      <!-- Column 2: Gemini Thumbnails -->
      <div class="flex flex-col h-full">
        <h4 class="text-md font-semibold mb-2 text-center text-gray-700 sticky top-0 bg-white z-10 py-1">Gemini 2.0 Flash Results</h4>
        <div class="flex-grow overflow-y-auto p-1 bg-gray-50 rounded-lg custom-scrollbar">
          <div class="flex flex-wrap justify-center gap-2">
            <div class="w-24 h-24 cursor-pointer relative group border-2 hover:border-purple-500 rounded-md overflow-hidden shadow-sm"
                 [class.border-purple-600]="result === selectedResult"
                 [class.border-transparent]="result !== selectedResult"
                 *ngFor="let result of geminiDocuments"
                 (click)="changeImageSelection(result)">
              <img [src]="'data:image/png;base64,' + result.image?.encodedImage"
                   class="w-full h-full object-cover" alt="Gemini Thumbnail" />
            </div>
            <div *ngIf="geminiDocuments.length === 0 && !showDefaultDocuments" class="text-center text-gray-400 text-sm p-4">
              No Gemini results.
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Chat input remains below -->
    <div class="chat-footer-outer mt-auto pt-4">
      <app-chat-input [term]="currentSearchTerm" (emitSearch)="this.searchTerm({ term: $event })">
      </app-chat-input>
    </div>
  </div>


  <!-- Configuration panel remains the same -->
  <div class="col-span-1 bg-white p-5">
    <div class="flex flex-col">
      <h2 class="text-2xl font-semibold mb-4" style="font-size: 1.5rem;">Configuration</h2>
      <mat-form-field class="w-full">
        <mat-label>AI Model</mat-label>
        <mat-select [(value)]="selectedModel">
          <mat-option *ngFor="let model of imagen3ModelsList" [value]="model.value" (click)="changeImagen3Model(model)">
            {{ model.viewValue }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <h3 class="text-2xl font-medium mt-4" style="font-size: 1.5rem;">Aspect Ratio</h3>
      <div class="mb-5">
        <button *ngFor="let ratio of aspectRatioList" [value]="ratio.value" mat-button class="aspect-button mx-2 mb-2"
          (click)="changeAspectRatio(ratio)" [class.active]="selectedAspectRatio === ratio">
          {{ ratio?.value }}
        </button>
      </div>

      <h3 class="text-2xl font-medium mt-4" style="font-size: 1.5rem;">Image Style</h3>
      <div class="mb-5">
        <button *ngFor="let style of imageStyleList" [value]="style.value" mat-raised-button
          class="style-button mx-2 mb-2" (click)="changeImageStyle(style)"
          [class.active]="selectedImageStyle === style.value">
          {{ style.value }}
        </button>
      </div>

      <div class="flex items-center">
        <mat-label class="text-2xl mr-4">Number of Results</mat-label>
        <mat-slider min="1" max="4" step="1" [(ngModel)]="numberOfResults" discrete
          (change)="onNumberOfResultsChange($event)">
          <input matSliderThumb value="{{numberOfResults}}">
        </mat-slider>
      </div>
    </div>
  </div>
</div>
